<template>
  <view class="classroom-container">
    <!-- 头部导航 -->
    <!-- <view class="header-bag">
      <image src="/static/icons/icon-close.png" class="back-btn" @click="goBack"></image>
      <view class="header-center">
        <text class="header-title">优享优品讲堂</text>
      </view>
    </view> -->

    <!-- 滑动标签栏 -->
    <view class="slide-tab-bar">
      <scroll-view class="tab-scroll" scroll-x="true" :scroll-left="scrollLeft">
        <view class="tab-wrapper">
          <view 
            v-for="(item, index) in channelList" 
            :key="item.id"
            class="tab-item"
            :class="{ 'active': currentChannelId === item.id }"
            @click="switchChannel(item.id, index)"
          >
            {{ item.title }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 视频列表 -->
    <scroll-view 
      class="video-list-wrapper" 
      scroll-y="true" 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="video-list">
        <view 
          v-for="item in videoList" 
          :key="item.id"
          class="video-item"
        >
          <view class="video-title">{{ item.title }}</view>
          
          <!-- 视频或图片显示 -->
          <view class="video-content">
            <video 
              v-if="item.video_url"
              :src="item.video_url"
              class="video-player"
              controls
              :poster="getImageUrl(item.small_url)"
            ></video>
            <image 
              v-else
              :src="baseUrl+item.small_url"
              class="video-poster"
              mode="aspectFill"
            ></image>
          </view>
          
          <view class="video-desc">{{ item.short_title }}</view>
          <view class="video-detail-btn" @click="goToDetail(item.id)">
            查看详情
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="load-more" v-if="hasMore">
        <text class="load-text">{{ loadingText }}</text>
      </view>
      
      <!-- 没有更多数据提示 -->
      <view class="no-more" v-if="!hasMore && videoList.length > 0">
        <text class="no-more-text">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { forumApi } from '@/api/index.js'
import {
		inject
	} from 'vue'
export default {
  name: 'Classroom',
  data() {
    return {
		baseUrl: inject('$baseUrl'),
      channelList: [], // 频道列表
      currentChannelId: null, // 当前选中的频道ID
      videoList: [], // 视频列表
      currentPage: 1, // 当前页码
      hasMore: true, // 是否还有更多数据
      loading: false, // 是否正在加载
      refreshing: false, // 是否正在刷新
      scrollLeft: 0, // 标签栏滚动位置
      loadingText: '上拉加载更多...'
    }
  },
  
  onLoad() {
    this.getChannelList()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 获取频道列表
    async getChannelList() {
      try {
        const res = await forumApi.getForumChannel()
        if (res.r === 0 && res.data.channel.length > 0) {
          this.channelList = res.data.channel
          // 默认选择第一个频道
          this.switchChannel(this.channelList[0].id, 0)
        } else {
          uni.showToast({
            title: '暂无数据',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取频道列表失败:', error)
        uni.showToast({
          title: '获取频道列表失败',
          icon: 'none'
        })
      }
    },
    
    // 切换频道
    switchChannel(channelId, index) {
      this.currentChannelId = channelId
      this.currentPage = 1
      this.videoList = []
      this.hasMore = true
      this.loadingText = '上拉加载更多...'
      
      // 计算标签栏滚动位置
      this.calculateScrollLeft(index)
      
      // 加载视频列表
      this.getVideoList()
    },
    
    // 计算标签栏滚动位置
    calculateScrollLeft(index) {
      const itemWidth = 120 // 每个标签项的大概宽度
      const containerWidth = uni.getSystemInfoSync().windowWidth
      const scrollLeft = Math.max(0, (index * itemWidth) - (containerWidth / 2) + (itemWidth / 2))
      this.scrollLeft = scrollLeft
    },
    
    // 获取视频列表
    async getVideoList(isLoadMore = false) {
      if (this.loading) return
      
      this.loading = true
      this.loadingText = '加载中...'
      
      try {
        const res = await forumApi.getForumList({
          channel_id: this.currentChannelId,
          page: this.currentPage
        })
        
        if (res.r === 0) {
          const newList = res.data.lists || []
          
          if (isLoadMore) {
            this.videoList = [...this.videoList, ...newList]
          } else {
            this.videoList = newList
          }
          console.log('=========video=========',this.videoList)
          // 判断是否还有更多数据
          if (newList.length === 0) {
            this.hasMore = false
            this.loadingText = '没有更多数据了'
          } else {
            this.hasMore = true
            this.loadingText = '上拉加载更多...'
          }
        } else {
          if (!isLoadMore) {
            uni.showToast({
              title: '暂无数据',
              icon: 'none'
            })
          }
        }
      } catch (error) {
        console.error('获取视频列表失败:', error)
        uni.showToast({
          title: '获取视频列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },
    
    // 加载更多
    loadMore() {
      if (!this.hasMore || this.loading) return
      
      this.currentPage++
      this.getVideoList(true)
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.currentPage = 1
      this.hasMore = true
      this.getVideoList()
    },
    
    // 获取图片完整URL
    getImageUrl(url) {
      if (!url) return ''
      // 这里需要根据你的实际情况拼接完整的图片URL
      return url.startsWith('http') ? url : `https://your-domain.com/${url}`
    },
    
    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/my/classroom-detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header-bag {
  display: flex;
  align-items: center;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: relative;
  
  .back-btn {
    width: 40rpx;
    height: 40rpx;
    margin-left: 30rpx;
  }
  
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .header-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }
  }
}

.slide-tab-bar {
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .tab-scroll {
    white-space: nowrap;
    
    .tab-wrapper {
      display: inline-flex;
      padding: 0 20rpx;
      
      .tab-item {
        flex-shrink: 0;
        padding: 24rpx 30rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        min-width: 120rpx;
        
        &.active {
          color: #ff6b35;
          font-weight: 500;
          border-bottom: 4rpx solid #ff6b35;
        }
      }
    }
  }
}

.video-list-wrapper {
  flex: 1;
  
  .video-list {
    padding: 20rpx;
    
    .video-item {
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      
      .video-title {
        padding: 30rpx 30rpx 20rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
      }
      
      .video-content {
        margin: 0 30rpx;
        border-radius: 12rpx;
        overflow: hidden;
        
        .video-player {
          width: 100%;
          height: 400rpx;
        }
        
        .video-poster {
          width: 100%;
          height: 400rpx;
        }
      }
      
      .video-desc {
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: #666;
        line-height: 1.4;
      }
      
      .video-detail-btn {
        margin: 0 30rpx 30rpx;
        padding: 20rpx;
        background-color: #ff6b35;
        color: #fff;
        text-align: center;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .load-more {
    padding: 40rpx;
    text-align: center;
    
    .load-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .no-more {
    padding: 40rpx;
    text-align: center;
    
    .no-more-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>